Flutter এ Implicit Animations এবং Explicit Animations হলো দুটি ভিন্ন ধরনের অ্যানিমেশন কৌশল। উভয়ই UI কে আরও ডাইনামিক এবং ইন্টারেক্টিভ করতে ব্যবহৃত হয়, তবে এগুলোর ব্যবহারের পদ্ধতি এবং কনট্রোলের পরিমাণ ভিন্ন। নিচে Implicit এবং Explicit Animations এর পার্থক্য এবং তাদের উদাহরণ তুলে ধরা হলো।
Implicit Animations:
Implicit Animations হলো প্রাক-নির্ধারিত এবং সহজে ব্যবহারের জন্য তৈরি করা অ্যানিমেশন, যা UI উপাদানগুলির ভ্যালু পরিবর্তন করার সময় স্বয়ংক্রিয়ভাবে ট্রাঞ্জিশন তৈরি করে। Flutter এ ইমপ্লিসিট অ্যানিমেশন ব্যবহারের জন্য কোনো অ্যানিমেশন কন্ট্রোলারের প্রয়োজন হয় না, যা এটি ব্যবহারে সহজ এবং দ্রুত করে তোলে।
বৈশিষ্ট্য:
- স্বয়ংক্রিয়ভাবে কাজ করে, খুব সহজে কনফিগার করা যায়।
- কোডিং কমপ্লেক্সিটি কম।
- সাধারণত রঙ, অবস্থান, আকার, বা অপাসিটির মত সাধারণ পরিবর্তনের জন্য ব্যবহৃত হয়।
উদাহরণ (Implicit Animation):
import 'package:flutter/material.dart';
class ImplicitAnimationExample extends StatefulWidget {
@override
_ImplicitAnimationExampleState createState() => _ImplicitAnimationExampleState();
}
class _ImplicitAnimationExampleState extends State<ImplicitAnimationExample> {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Implicit Animation Example')),
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
child: AnimatedContainer(
duration: Duration(seconds: 1),
width: _isExpanded ? 200.0 : 100.0,
height: _isExpanded ? 200.0 : 100.0,
color: _isExpanded ? Colors.blue : Colors.red,
child: Center(child: Text('Tap me!')),
),
),
),
);
}
}
- AnimatedContainer: এটি একটি Implicit Animation Widget যা যখন কোনো প্রপার্টি (যেমন, আকার বা রঙ) পরিবর্তন হয়, তখন সেটি মসৃণভাবে অ্যানিমেট করে।
- duration: অ্যানিমেশনের দৈর্ঘ্য কনফিগার করে।
- setState: UI আপডেট করে এবং অ্যানিমেশন ট্রিগার করে।
Explicit Animations:
Explicit Animations আপনাকে অ্যানিমেশন কন্ট্রোল এবং কাস্টমাইজেশনের পূর্ণ ক্ষমতা দেয়। এখানে আপনাকে একটি AnimationController এবং Animation অবজেক্ট ব্যবহার করতে হয়, যা অ্যানিমেশন স্টার্ট, স্টপ, রিপিট এবং রিভার্স করতে ব্যবহৃত হয়। এই অ্যানিমেশনগুলি জটিল এবং কাস্টম অ্যানিমেশন তৈরি করতে সহায়ক।
বৈশিষ্ট্য:
- পূর্ণ কন্ট্রোল এবং কাস্টমাইজেশন প্রদান করে।
- জটিল এবং কাস্টম অ্যানিমেশন তৈরি করতে সক্ষম।
- AnimationController এবং Tween ব্যবহৃত হয়।
উদাহরণ (Explicit Animation):
import 'package:flutter/material.dart';
class ExplicitAnimationExample extends StatefulWidget {
@override
_ExplicitAnimationExampleState createState() => _ExplicitAnimationExampleState();
}
class _ExplicitAnimationExampleState extends State<ExplicitAnimationExample> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
);
_animation = Tween<double>(begin: 0, end: 300).animate(_controller)
..addListener(() {
setState(() {});
});
_controller.repeat(reverse: true);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Explicit Animation Example')),
body: Center(
child: Container(
width: _animation.value,
height: _animation.value,
color: Colors.blue,
),
),
);
}
}
- AnimationController: এটি Explicit Animation এর মূল কন্ট্রোলার, যা অ্যানিমেশনের সময়কাল এবং চলাচল পরিচালনা করে।
- Tween: এটি স্টার্ট এবং এন্ড ভ্যালু নির্ধারণ করে এবং সেই ভ্যালুগুলোর মধ্যে মসৃণ পরিবর্তন করে।
- addListener: অ্যানিমেশনের প্রতি ফ্রেম আপডেটের সময় সেটি UI পুনরায় রেন্ডার করে।
Implicit এবং Explicit Animations এর পার্থক্য:
| বৈশিষ্ট্য | Implicit Animations | Explicit Animations |
|---|---|---|
| ব্যবহারিকতা | সহজ এবং দ্রুত ব্যবহারের জন্য | জটিল এবং কাস্টমাইজড অ্যানিমেশন প্রয়োজন হলে |
| কোড কমপ্লেক্সিটি | সাধারণত কম, সহজ কোড | কোড বেশি এবং AnimationController প্রয়োজন |
| কন্ট্রোল ক্ষমতা | সীমিত কন্ট্রোল, ডিফল্ট সেটিংসের উপর নির্ভরশীল | পূর্ণ কন্ট্রোল, কাস্টম লজিক এবং সময় নিয়ন্ত্রণ করা যায় |
| উদাহরণ | AnimatedContainer, AnimatedOpacity ইত্যাদি | AnimationController, Tween, AnimatedBuilder |
| উপযুক্ত ক্ষেত্র | সাধারণ মুভমেন্ট, রঙ পরিবর্তন, সাইজ পরিবর্তন | জটিল অ্যানিমেশন, যেমন স্কেলিং, রোটেশন, এবং ফেড |
কখন কোনটি ব্যবহার করবেন:
Implicit Animations: যখন অ্যানিমেশন সহজ এবং সাধারণ যেমন রঙ পরিবর্তন, অবস্থান পরিবর্তন, বা সাইজ পরিবর্তনের প্রয়োজন হয়, তখন Implicit Animations ব্যবহার করা সবচেয়ে ভালো। এটি সহজে কনফিগার করা যায় এবং দ্রুত ইমপ্লিমেন্ট করা যায়।
Explicit Animations: যদি আপনার জটিল অ্যানিমেশন, পূর্ণ কন্ট্রোল এবং কাস্টমাইজড ট্রানজিশন প্রয়োজন হয়, তাহলে Explicit Animations ব্যবহার করা সেরা। এটি আপনাকে অ্যানিমেশন স্টার্ট, স্টপ, রিপিট এবং রিভার্স করার পূর্ণ ক্ষমতা দেয়, যা জটিল ইউজার ইন্টারফেস তৈরি করতে সহায়ক।
Flutter এ কিছু জনপ্রিয় Implicit এবং Explicit Animation Widgets:
Implicit Animation Widgets:
- AnimatedContainer: আকার, রঙ, মার্জিন, বর্ডার রেডিয়াস ইত্যাদি অ্যানিমেট করতে ব্যবহার করা হয়।
- AnimatedOpacity: উইজেটের অপাসিটি পরিবর্তন করতে ব্যবহার করা হয়।
- AnimatedAlign: উইজেটের পজিশন পরিবর্তন করতে ব্যবহার করা হয়।
- AnimatedPadding: উইজেটের প্যাডিং পরিবর্তন করতে ব্যবহার করা হয়।
Explicit Animation Widgets:
- AnimatedBuilder: কাস্টম অ্যানিমেশন তৈরি করতে এবং UI কে রিফ্রেশ করতে সহায়ক।
- TweenAnimationBuilder: টুইনের মাধ্যমে কাস্টম অ্যানিমেশন তৈরি করা যায়।
- AnimatedWidget: এটি একটি বেসিক ক্লাস, যা কাস্টম অ্যানিমেশন তৈরি করতে সহায়তা করে।
Flutter এ Implicit এবং Explicit Animations এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে ইন্টারেক্টিভ এবং আকর্ষণীয় করে তুলতে পারেন। আপনার প্রয়োজন অনুসারে এবং অ্যানিমেশনের জটিলতা অনুযায়ী এই দুটি পদ্ধতির মধ্যে সঠিকটি বেছে নিন।
Read more